<template>
    <div id="container">
        <el-button type="primary" @click="exportData">后端导出今日打卡数据Excel</el-button>
        <h3>所有打卡数据后端分页</h3>
        <el-table
                :data="list"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="userId"
                    label="用户ID"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="学号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="realName"
                    label="姓名"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="telephoneNumber"
                    label="手机号码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="identityNumber"
                    label="身份证号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="temperature"
                    label="体温"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="填报日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="isSubmit"
                    label="是否提交"
                    width="180">
            </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 10px">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: "SubmitManagePagination",
    mounted() {
        this.getAllSubmit();
    },
    data(){
        return {
            list: [],  //表格数据
            currentPage: 1,  //当前页
            pageSize: 5,  //单页记录条数
            total:0, //总记录条数
        }
    },
    methods:{
        //导出Excel
        exportData(){
            this.$axios({
                method: "get",
                url: "/myapi/excel",
                responseType: "blob"
            }).then(res => {
                const link = document.createElement("a");
                let blob = new Blob([res.data], { type: "multipary/form-data" });
                link.style.display = "none";
                link.href = URL.createObjectURL(blob);
                link.setAttribute("download", decodeURI('今日打卡数据.xlsx'));
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                console.log(res);
            })
        },
        getAllSubmit(){
            var vm = this;
            this.axios({
                url: '/myapi/allSubmit/'+vm.currentPage+'/'+vm.pageSize,
                method: 'get'
            }).then(function (response) {
                if(response.data.code===200){
                    console.log(response.data);
                    vm.list = response.data.data.tableData;
                    vm.total = response.data.data.total;
                }
                else if(response.data.code===2001){
                    vm.$message.error('你还未登录!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
                else if(response.data.code===4001){
                    vm.$message.error('无权限!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            console.log(this.pageSize);
            this.getAllSubmit();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            console.log(this.currentPage);
            this.getAllSubmit();
        }
    }
}
</script>

<style scoped>

</style>
